{{template "admin/header.html"}}
<title>更新内容 - GPRESS</title>
<link rel="stylesheet" type="text/css" href="{{basePath}}admin/css/cherry-markdown.min.css">
{{template "admin/bodystart.html"}}

{{ $category := selectList "category" "" 1 20 "* FROM category order by sortNo desc" }}
{{ $pageTemplate := pageTemplate }} <!-- 模版数据 -->

<style>
	.code-line .number{
		background-color: transparent;
		font-size: 12px;
		padding: 0;
		vertical-align: unset;
		margin-right: 0;
	}
</style>
<section class="section">
	<input type="hidden" id="content" value="{{.Data.Content}}">
	<input type="hidden" id="markdown" value="{{.Data.Markdown}}">
	<input type="hidden" id="thumbnail" value="{{.Data.Thumbnail}}">
	<input type="hidden" id="id" value="{{.Data.Id}}">
	<input type="hidden" id="categoryName" value="{{.Data.CategoryName}}">
	<input type="hidden" id="categoryID" value="{{.Data.CategoryID}}">
	<input type="hidden" id="templateID" value="{{.Data.TemplateID}}">

	<div class="container">
		<div class="table-content">
			<div class="column">
				<form id="gpress-form" action="{{basePath}}admin/{{.UrlPathParam}}/update" method="POST">
					<div class="tile is-ancestor">
						<div class="tile is-4">
							<!-- 1/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										ID
									</div>
									<div class="right">
										<input class="input is-small" type="text" disabled value="{{.Data.Id}}">
									</div>
								</li>
							</ul>
						</div>
						<div class="tile is-4">
							<!-- This tile will take the rest: 2/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										文章标题
									</div>
									<div class="right">
										<input class="input is-small" type="text" name="title" value="{{.Data.Title}}" id="title" />
									</div>
								</li>
							</ul>
						</div>
						<div class="tile is-4">
							<!-- 1/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										副标题
									</div>
									<div class="right">
										<input class="input is-small" type="text" name="subtitle" value="{{.Data.Subtitle}}" id="subtitle">
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="tile is-ancestor">
						<div class="tile is-4">
							<!-- This tile will take the rest: 2/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										keyword
									</div>
									<div class="right">
										<input class="input is-small" type="text" name=keyword value="{{.Data.Keyword}}" id="keyword">
									</div>
								</li>
							</ul>
						</div>


						<div class="tile is-4">
							<!-- 1/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										页面模版
									</div>
									<div class="select is-small">
										<select id="templateSelect">
											<option value="">默认(content.html)</option>
											{{ range $index,$obj := $pageTemplate }}
											<option value='{{$obj.Id}}'>{{$obj.Name}}</option>
											{{end}}
										</select>
									</div>
								</li>
							</ul>
						</div>

						<div class="tile is-4">
							<!-- 1/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										tag标签
									</div>
									<div class="right">
										<input class="input is-small" type="text" name="tag" value="{{.Data.Tag}}" id="tag">
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="tile is-ancestor">
						<div class="tile is-4">
							<!-- This tile will take the rest: 2/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">description</div>
									<div class="right">
										<input class="input is-small" type="text" name="description" id="description" value="{{.Data.Description}}" />
									</div>
								</li>
							</ul>
						</div>
						<div class="tile">
							<!-- This tile will take the rest: 2/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										导航菜单
									</div>
									<div class="select is-small">
										<select id="navSelect">
											<option value="">请选择</option>
											{{ range $index,$obj := $category.Data }}
											<option value='{{$obj.Id}}'>{{$obj.Name}}</option>
											{{end}}
										</select>
									</div>
								</li>
							</ul>
						</div>
						<div class="tile is-4">
							<!-- This tile will take the rest: 2/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										作者
									</div>
									<div class="right">
										<input class="input is-small" type="text" name="author" value="{{.Data.Author}}" id="author">
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="tile is-ancestor">
						<div class="tile is-4">
							<!-- 1/3 -->
							<ul class="save-ul">
								<li style="align-items: flex-start;">
									<div class="left">
										封面图
									</div>
									<div class="right">
										<div class="upload-modlue">
											<div class="upload-box">
												<i class="iconfont icon-shangchuan"></i>
												<p>上传图片</p>
												<input class="input is-small" type="file" id="fileInput">
											</div>
											<div class="img-box">
												<div class="img-preview">
													<img src="{{.Data.Thumbnail}}" id="img">
													<div class="delete-btn">
														<i class="iconfont icon-shanchu"></i>
													</div>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="tile is-4">
							<!-- 1/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										状态
									</div>
									<div class="select is-small">
										<select name="status" id="status">
											<option value="1">公开</option>
											<option value="0">列表不显示</option>
											<option value="2">私密</option>
										</select>
									</div>
								</li>
							</ul>
						</div>
						<div class="tile is-4">
							<!-- This tile will take the rest: 2/3 -->
							<ul class="save-ul">
								<li>
									<div class="left">
										排序
									</div>
									<div class="right">
										<input class="input is-small" type="number" name="sortNo" value="{{.Data.SortNo}}" id="sortNo">
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="tile is-ancestor">
						<div class="tile is-8">
							<ul class="save-ul">
								<li>
									<div class="left">
										文章内容
									</div>
									<div class="right">
										<div class="control">
											<label class="radio">
												<input type="radio" value="0" name="foobar" checked>
												富文本
											</label>
											<label class="radio">
												<input type="radio" value="1" name="foobar">
												Markdown
											</label>
                                             &nbsp;&nbsp;&nbsp;&nbsp;
											<button type="submit" class="button is-success is-small">提交</button>
											<button type="reset" class="button is-info is-light is-small">重置</button>
										</div>

									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="tile is-ancestor">
						<div class="tile is-12">
							<ul class="save-ul">
								<li id="editor-show" style="align-items: flex-start;height: 420px;width: 1500px; margin-left: 0px">
									<div class="right flex1">
										<div id="editor—wrapper">
											<div id="toolbar-container">
												<!-- 工具栏 -->
											</div>
											<div id="editor-container" style="height: 400px;">
												<!-- 编辑器 -->
											</div>
										</div>
									</div>
								</li>
								<li id="markdown-show" style="align-items: flex-start;display: none;">
									<div class="right flex1" style="height: 420px;width: 1500px; margin-left: 0px">
										<div id="markdown-container"></div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="field is-grouped" style="padding-left: 190px;">
						<div class="control">
							<button type="submit" class="button is-success is-small">提交</button>
						</div>
						<div class="control">
							<button type="reset" class="button is-info is-light is-small">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
<link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.min.js"></script>
<script type="text/javascript" src="{{basePath}}admin/js/cherry-markdown.min.js"></script>
<script>
    $("#status").val("{{.Data.Status}}")

	let categoryID = $('#categoryID').val()
	let categoryName = $('#categoryName').val()
	let templateID = $('#templateID').val()
	let templateName = $('#templateName').val()
	let content = ''
	let thumbnail = $('#thumbnail').val()
	
	$('#navSelect').val(categoryID)
	$('#templateSelect').val(templateID)
	
	$('#templateSelect').change(function(e) {
		templateID = $('#templateSelect').val()
		templateName = $('#templateSelect option:selected').text()
	})
	$('#navSelect').change(function(e) {
		categoryID = $('#navSelect').val()
		categoryName = $('#navSelect option:selected').text()
	})

	// 图片上传
	if (thumbnail) {
		$('.upload-box').hide()
		$('.img-box').show()
	}
	$('#fileInput').change(function(e) {
		let file = e.target.files[0]
		if (!/image\/\w+/.test(file.type)) {
			$.confirm({
				useBootstrap: false,
				boxWidth: '300px',
				title: '提示',
				content: '请上传图片格式！',
				type: 'red',
				buttons: { '确定': function() {} }
			})
			return false
		}
		var formdata = new FormData() // FormData对象，来发送二进制文件。
		formdata.append('file', e.currentTarget.files[0]) // 将文件追加到 formdata对象中
		$.ajax({
			type: 'post',
			url: '/admin/upload',
			data: formdata,
			processData: false,
			contentType: false,
			success(res) {
				thumbnail = res.data
				$('#img').attr('src', thumbnail) //将img的src属性的值赋值
				$('.upload-box').hide()
				$('.img-box').show()
			},
			error(err) {
				$.confirm({
					useBootstrap: false,
					boxWidth: '400px',
					title: '提示',
					content: '上传失败！',
					type: 'red',
					buttons: { '确定': function() {} }
				})
			}
		})
	})

	// 删除图片
	$('.delete-btn').click(function() {
		thumbnail = ''
		$('#fileInput').val('')
		$('#img').attr('src', '')
		$('.upload-box').show()
		$('.img-box').hide()
	})

	// markdown编辑器
	$(document).ready(function() {
		let fullScreen = Cherry.createMenuHook('全屏', 'full')
		window.cherryObj = new Cherry({
			id: 'markdown-container',
			value: $('#markdown').val(),
			toolbars: {
				toolbar: ['bold', 'italic', 'strikethrough', '|', 'color', 'header', '|', 'list', {
					insert: ['image', 'link', 'hr', 'br', 'code', 'formula',
						'toc', 'table', 'line-table', 'bar-table',
					]
				}, '|', 'full'],
				customMenu: {
					// 注入编辑器的导航中
					// 对象 key 可以作为导航项的名字（需要保证唯一），在上方的配置中使用
					'full': fullScreen,
				},
			},
			fileUpload(file, callback) {
				var formdata = new FormData() // FormData对象，来发送二进制文件。
				formdata.append('file', file) // 将文件追加到 formdata对象中
				$.ajax({
					type: 'post',
					url: '/admin/upload',
					data: formdata,
					processData: false,
					contentType: false,
					success(res) {
						callback(res.data)
					},
					error(err) {}
				})
			},
		})
		$('.cherry-toolbar-全屏').click(function(e) {
			if ($('#markdown-container').hasClass('full-screen')) {
				$('.cherry-toolbar-全屏').html('全屏')
				$('#markdown-container').removeClass('full-screen')
			} else {
				$('.cherry-toolbar-全屏').html('退出全屏')
				$('#markdown-container').addClass('full-screen')
			}
		})
	})

	// 单选切换
	$('input[name=\'foobar\']').click(function(e) {
		let current = $('input[name=\'foobar\']:checked').val()
		if (current == 0) {
			$('#editor-show').show()
			$('#markdown-show').hide()
		} else {
			$('#markdown-show').show()
			$('#editor-show').hide()
		}
	})
	
	// 判断markdown是否有值，有值优先显示markdown编辑器
	if($('#markdown').val()){
		$('#markdown-show').show()
		$('#editor-show').hide()
		$('input:radio[value=1]').attr('checked','true')
}

	// 判断markdown是否有值，有值优先显示markdown编辑器
	if ($('#markdown').val()) {
		$('#markdown-show').show()
		$('#editor-show').hide()
		$('input:radio[value=1]').attr('checked', 'true')
	}

	// 富文本编辑器
	const {
		createEditor,
		createToolbar
	} = window.wangEditor
	const editorConfig = {
		placeholder: '请输入内容...',
		MENU_CONF: {},
		onChange(editor) {
			content = editor.getHtml()
			// 也可以同步到 <textarea>
		}
	}
	editorConfig.MENU_CONF['uploadImage'] = {
		server: '/admin/upload',
		fieldName: 'file',
		customInsert(res, insertFn) { // 自定义返回数据结构。不用按照wangeditor默认规定的服务器返回的数据结构
			insertFn(res.data)
		},
		onSuccess(file, res) {
			console.log(res, '--上传成功---')
		},
		onFailed(file, res) {
			$.dialog({
				title: '提示',
				useBootstrap: false,
				boxWidth: '400px',
				content: '上传失败',
			})
		},
		onError(file, err, res) {
			console.log('--上传错误---')
		},
	}
	const editor = createEditor({
		selector: '#editor-container',
		html: $('#content').val(),
		config: editorConfig,
		mode: 'default', // or 'simple'
	})
	const toolbar = createToolbar({
		editor,
		selector: '#toolbar-container',
		config: {},
		mode: 'default', // or 'simple'
	})

	// 保存提交
	const form = document.getElementById('gpress-form')
	form.addEventListener('submit', async event => {
		event.preventDefault()
		const formData = new FormData(form)
		const jsonObject = {
			status: $('#status').val()-0,
			id: $('#id').val(),
			title: $('#title').val(),
			subtitle: $('#subtitle').val(),
			keyword: $('#keyword').val(),
			categoryID: categoryID,
			categoryName: categoryName,
			templateID: templateID,
			tag: $('#tag').val(),
			description: $('#description').val(),
			author: $('#author').val(),
			thumbnail: thumbnail,
			sortNo: $('#sortNo').val()-0,
			content: content,
			markdown: cherryObj.getMarkdown(),
		}
		if(jsonObject.title==""||jsonObject.categoryID==""){
			//alert("文章标题和导航菜单不能为空");
			$.confirm({
				useBootstrap: false,
				boxWidth: '300px',
				title: '提示',
				content: '文章标题 和 导航菜单 不能为空',
				type: 'red',
				buttons: { 确定: function () {} },
			})
			return false;
		}
		const response = await fetch(form.action, {
			method: form.method,
			body: JSON.stringify(jsonObject),
			headers: { 'Content-Type': 'application/json' }
		})
		let res = await response.json()
		if (res.statusCode == 1) {
			$.confirm({
				useBootstrap: false,
				boxWidth: '400px',
				title: '提示',
				content: '修改成功！',
				type: 'green',
				buttons: {
					'确定': function() {
						window.location.href = '{{basePath}}admin/{{.UrlPathParam}}/list'
					}
				}
			})
		} else {
			$.confirm({
				useBootstrap: false,
				boxWidth: '400px',
				title: '提示',
				content: res.message,
				type: 'red',
				buttons: { '确定': function() {} }
			})
		}
	})
</script>

{{template "admin/bodyend.html"}}
